<template>
  <el-dialog
    :title="title"
    :visible.sync="open"
    width="60%"
    :close-on-click-modal="false"
    class="dia-style"
    @close="resetForm"
  >
    <div style="padding: 0 20px 20px 0">
      <div class="dia-form">
        <HkForm
          ref="hkFormRef"
          label-width="180"
          :form-labels="formObj.formLabels"
          :rules="formObj.formRules"
          :data="formData"
          :dict-list="formObj.dictList"
          :btn-hidden="true"
          @handleEvent="handleEvent"
        >
          <template #filter-url>
            <el-row>
              <el-col :span="20" style="margin-right: 20px">
                <el-input
                  v-model="formData.url"
                  :clearable="true"
                  placeholder="请输入链接URL"
                  :rules="formObj.formRules"
                  @blur="handleEvent($event, 'url')"
                />
              </el-col>
              <el-col :span="2">
                <el-button type="primary" plain @click="handleClick">测试</el-button>
              </el-col>
            </el-row>
          </template>
        </HkForm>
      </div>
    </div>
    <!-- 底部 -->
    <div slot="footer">
      <el-button type="primary" @click="handleSubmit">保 存</el-button>
      <el-button @click="resetForm">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import HkForm from '@/components/Hk-Form'
import { submitData, addData, checkEdit, editDataSource } from '@/api/icp/associatedData'

export default {
  components: { HkForm },
  props: {
    title: {
      type: String,
      default: ''
    },
    form: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      open: false,
      isDisabled: true,
      formData: {},
      formObj: {
        formLabels: [
          {
            label: '名称',
            field: 'name',
            type: 'input',
            span: 24
          },
          {
            label: '数据库',
            field: 'type',
            type: 'select',
            list: 'typeList',
            span: 24
          },
          {
            label: '用户名',
            field: 'username',
            type: 'input',
            span: 24
          },
          {
            label: '密码',
            field: 'password',
            type: 'password',
            placeholder: '请输入密码',
            span: 24
          },
          {
            label: '链接URL',
            field: 'url',
            type: 'slot',
            span: 24
          },
          {
            label: '描述信息',
            field: 'description',
            type: 'textarea',
            attrs: { rows: 4 },
            span: 24,
            maxlength: 200,
            limit: true
          }
        ],
        formRules: {
          name: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
          type: [{ required: true, message: '数据库不能为空', trigger: 'change' }],
          username: [{ required: true, message: '用户名不能为空', trigger: 'blur' }],
          password: [{ required: true, message: '密码不能为空', trigger: 'blur' }],
          url: [{ required: true, message: 'URL不能为空', trigger: 'blur' }]
        },
        dictList: {
          typeList: [{ label: 'MYSQL', value: 'MYSQL' }]
        }
      }
    }
  },
  watch: {
    form: {
      handler(newVal) {
        if (newVal?.id) {
          this.formData = newVal
        }
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    /** 显示弹窗 */
    show() {
      this.open = true
    },
    reset() {
      this.isDisabled = true
      this.formData = {
        name: undefined,
        type: undefined,
        username: undefined,
        password: undefined,
        url: undefined,
        description: undefined
      }
    },
    /** 保存 */
    handleSubmit() {
      this.$refs.hkFormRef.handleFormSubmit('formLabels').then(() => {
        if (this.formData.id) {
          const _self = this
          checkEdit(this.formData)
            .then((res) => {
              this.$modal
                .confirm(res)
                .then(function() {
                  return editDataSource(_self.formData)
                })
                .then(() => {
                  this.$message.success('保存成功')
                  this.open = false
                  this.resetForm()
                  this.$emit('handleSubmit')
                })
                .catch(() => {})
            })
            .catch(() => {})
        } else {
          if (this.isDisabled) {
            this.$message.warning('请先测试链接url')
            return
          }
          addData(this.formData)
            .then(() => {
              this.$message.success('保存成功')
              this.open = false
              this.resetForm()
              this.$emit('handleSubmit')
            })
            .catch(() => {})
        }
      })
    },
    /** 取消 */
    resetForm() {
      this.$refs.hkFormRef.resetForm('formLabels')
      this.reset()
      this.open = false
    },
    /** 输入框数据变化事件*/
    handleEvent() {
      this.isDisabled = true
    },
    /** 点击测试按钮 */
    handleClick() {
      this.$refs.hkFormRef.handleFormSubmit('formLabels').then(() => {
        submitData(this.formData)
          .then(() => {
            this.$message.success('测试成功')
            this.isDisabled = false
          })
          .catch(() => {})
      })
    }
  }
}
</script>

<style scoped></style>
